<!--<template>-->
<!--<i-form ref="formValidate" :model="formValidate" :rules="formValidateRules"  class="card-box">-->
<!--<Form-item class="formValidate-title">-->
<!--<h3>系统登录</h3>-->
<!--</Form-item>-->
<!---->
<!--<Form-item prop="username">-->
<!--<i-input size="large" type="text" v-model="formValidate.account" placeholder="用户名">-->
<!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->
<!--</i-input>-->
<!--</Form-item>-->
<!--<Form-item prop="password">-->
<!--<i-input size="large"  type="password" v-model="formValidate.password" placeholder="密码">-->
<!--<Icon type="ios-locked-outline" slot="prepend"></Icon>-->
<!--</i-input>-->
<!--</Form-item>-->
<!--<Form-item class="login-no-bottom">-->
<!--<Row >-->
<!--<i-col :xs="{ span: 4, offset: 6 }" >-->
<!--<i-button type="primary" @click="handleSubmit('formValidate')">登录</i-button>-->
<!--</i-col>-->
<!--<i-col :xs="{ span: 4, offset: 6 }">-->
<!--<i-button  type="primary" @click="formValidateReset('formValidate')">重置</i-button>-->
<!--</i-col>-->
<!--</Row>-->
<!--</Form-item>-->
<!--</i-form>-->
<!--</template>-->
<!--<script>-->
<!--import apiUtil from '../api/api_util';-->

<!--export default {-->
<!--data () {-->
<!--return {-->
<!--formValidate: {-->
<!--account: '',-->
<!--password: '',-->
<!--},-->
<!--formValidateRules: {-->
<!--account: [-->
<!--{ required: true, message: '请填写用户名', trigger: 'blur' }-->
<!--],-->
<!--password: [-->
<!--{ required: true, message: '请填写密码', trigger: 'blur' },-->
<!--{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }-->
<!--]-->
<!--}-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleSubmit(name) {-->

<!--let that = this;-->
<!--let model = this.$refs[name].model;-->
<!--this.$refs[name].validate((valid) => {-->
<!--that.loginIn(model);-->
<!--})-->
<!--},-->
<!--loginIn:function(model){-->
<!--let that = this;-->
<!--//-->
<!--// model.startDate = this.$refs[name].model-->
<!--// model.endDate = model.endDate.split('T')[0];-->

<!--let params = that.$qs.stringify(model);-->
<!--this.$Loading.start();-->

<!--// apiUtil.post(apiUtil.urls.managerUserLogin, params, function (res) {-->
<!--//     that.$Loading.finish();-->
<!--//-->
<!--//     let route ={-->
<!--//         path: '/table',-->
<!--//     }-->
<!--//     this.$router.push(route);-->
<!--// });-->
<!--this.$router.push({ path: '/table' });-->

<!--// let route ={-->
<!--//     path: '/table',-->
<!--// }-->
<!--// this.$router.push(route);-->
<!--},-->
<!--formValidateReset(name){-->
<!--this.$refs[name].resetFields();-->
<!--}-->
<!--},-->
<!--mounted() {-->
<!--if(sessionStorage.getItem('username')){-->
<!--this.formValidate.username = JSON.parse(sessionStorage.getItem('username'));-->
<!--}-->
<!--if(sessionStorage.getItem('password')){-->
<!--this.formValidate.password = JSON.parse(sessionStorage.getItem('password'));-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->


<!--<style scoped>-->
<!--.card-box {-->
<!--padding: 20px;-->
<!--/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/-->
<!-- -webkit-border-radius: 5px;-->
<!--border-radius: 5px;-->
<!-- -moz-border-radius: 5px;-->
<!--background-clip: padding-box;-->
<!--margin-bottom: 20px;-->
<!--background-color: #F9FAFC;-->
<!--margin: 180px auto;-->
<!--width: 400px;-->
<!--/* border: 2px solid #8492A6;*/-->
<!--}-->
<!---->
<!--.title {-->
<!--margin: 0px auto 40px auto;-->
<!--text-align: center;-->
<!--color: #505458;-->
<!--}-->
<!--.formValidate-title {-->
<!--text-align: center;-->
<!--font-seze: 28px;-->
<!--}-->
<!--.formValidate-title h3{-->
<!--font-size: 18px;-->
<!--}-->
<!--.login-no-bottom {-->
<!--margin-bottom: 10px;-->
<!--}-->
<!---->
<!--</style>-->
<template>
    <div class="login-page">
        <i-form ref="formLogin" :model="formLogin" :rules="formLoginRules" class="card-box">
            <Form-item class="formLogin-title">
                <!--<h2>xxx 智慧营区</h2>-->
                <img src="../../static/images/login_logo.png" style="width:100%" />
            </Form-item>

            <Form-item prop="username">
                <Input size="large" type="text" v-model="formLogin.username" placeholder="用户名">
                    <Icon type="ios-person-outline" style="color: #23b89a;font-weight: bolder; font-size: 24px;"
                          slot="prefix"></Icon>
                </Input>
            </Form-item>
            <Form-item prop="pwd">
                <Input @keyup.enter.native="handleSubmit('formLogin')" size="large" type="password"
                         v-model="formLogin.pwd" placeholder="密码">
                    <Icon type="ios-lock-outline" style="color: #df4e41;font-weight: bolder; font-size: 22px;"
                          slot="prefix"></Icon>
                </Input>
            </Form-item>
            <Form-item prop="isSavePwd">
                <!--<Checkbox-group v-model="" @on-change="checkChange">-->
                    <!--<Checkbox>记住密码</Checkbox>-->
                <!--</Checkbox-group>-->
                <Checkbox v-model="formLogin.isSavePwd" >
                    记住密码
                </Checkbox>
            </Form-item>
            <Form-item>
                <Button type="primary" @click="handleSubmit('formLogin')" :size="loginBtnSize" icon="ios-people" long
                    style="background-color: #1e2a38;border:1px solid #1e2a38">登录</Button>
            </Form-item>
        </i-form>
    </div>
</template>
<script>
    import apiUtil from '../assets/utils/api_util';
    import baseUtil from '../assets/utils/base-util';

    export default {
        data() {
            return {
                formLogin: {
                    username: '',
                    pwd: '',
                    isSavePwd:true,
                },
                formLoginRules: {
                    username: [
                        {required: true, message: '请输入登录名', trigger: 'blur'},
                    ],
                    pwd: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                },
                //菜单
                menuTreeData: [],
                loginBtnSize: 'large',
            }
        },
        methods: {
            checkChange: function (data) {
                console.log('checkChange值:', data);

                // this.checkGateArr.push(data[0]);

            },
            //保存cookie
            setCookie(username, password, exdays) { // 用户名, 密码, 保存天数
                let exdate = new Date(); // 获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
                // 字符串拼接cookie
                window.document.cookie = 'userName=' + username + ';path=/;expires=' + exdate.toGMTString();
                window.document.cookie = 'userPwd=' + password + ';path=/;expires=' + exdate.toGMTString();
            },
            // 清除Cookie
            clearCookie() {
                this.setCookie('', '', -1); // 修改2值都为空，天数为负1天就好了
            },
            // 读取Cookie
            getCookie() {
                // console.log(document.cookie);
                if (document.cookie.length > 0) {
                    let arr = document.cookie.split('; '); // 这里显示的格式需要切割一下自己可输出看下
                    for (let i = 0; i < arr.length; i++) {
                        let arr2 = arr[i].split('='); // 再次切割
                        // 判断查找相对应的值
                        if (arr2[0] == 'userName') {
                            this.formLogin.username = arr2[1]; // 保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.formLogin.pwd = arr2[1];
                        }
                    }
                }
            },

            //获取菜单
            getMenuData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetMenu, para, function (res) {
                    that.$Loading.finish();

                    that.menuTreeData = res.Msg;
                    console.log('menuTreeData:', that.menuTreeData)

                });
            },
            handleSubmit(name) {
                let model = this.$refs[name].model;

                let that = this;
                if (this.formLogin.isSavePwd) { // 记住密码
                    this.setCookie(this.formLogin.username, this.formLogin.pwd, 30); // 保存期限为30天
                } else {
                    this.clearCookie(); // 清空 Cookie
                }

                console.log('formLogin.isSavePwd:',this.formLogin.isSavePwd);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        sessionStorage.setItem('user', JSON.stringify(this.formLogin.username));

                        let params = that.$qs.stringify(model);
                        this.$Loading.start();

                        apiUtil.post(that, apiUtil.urls.AuthLogin, params, function (res) {
                            that.$Loading.finish();

                            // that.$Message.success('提交成功!');
                            console.log('登录提交成功进来了!');

                            sessionStorage.setItem('userId', res.Msg.Id);
                            sessionStorage.setItem('headimgurl', res.Msg.Headimgurl);
                            sessionStorage.setItem('personalname', res.Msg.Personalname);
                            sessionStorage.setItem('token', res.Msg.Token);

                            let roles = '';
                            if (res.Msg.NavMenus) {
                                roles = res.Msg.NavMenus.split(',');

                                that.menuTreeData.forEach(function (item2, j) {
                                    item2.children.forEach(function (item3, z) {
                                        if (roles.indexOf((item3.id).toString()) > -1) {
                                            item3.checked = true;
                                        }
                                    })
                                })
                            }

                            sessionStorage.setItem('menu', JSON.stringify(that.menuTreeData));
                            that.menuTreeDataEdit = that.menuTreeData;

                            console.log('menuTreeData:', that.menuTreeData);
                            baseUtil.pageJump(that, '', 'home')
                        });

                    } else {
                        this.$Message.error('表单验证失败!');
                    }

                })
            },
            formLoginReset(name) {
                this.$refs[name].resetFields();
            },
        },
        mounted() {
            // if (sessionStorage.getItem('account')) {
            //     this.formLogin.account = JSON.parse(sessionStorage.getItem('account'));
            // }
            // if (sessionStorage.getItem('password')) {
            //     this.formLogin.password = JSON.parse(sessionStorage.getItem('password'));
            // }
            this.getCookie();
            this.getMenuData();
        }
    }
</script>


<style scoped>
    .login-page {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*background: url("../../static/images/bg.jpg") cover;*/
        background: url('../../static/images/bg.jpg');
        /*!*repeat: no-repeat;*!*/
        background-size: cover;
        /*background-size: 100% 100%;*/
    }

    .card-box {
        padding: 25px;
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        -webkit-border-radius: 15px;
        border: 3px solid #EEEEEE;
        border-radius: 15px;
        -moz-border-radius: 15px;
        background-clip: padding-box;
        background-color: #F9FAFCBB;
        margin: 10% auto;
        width: 400px;
        /* border: 2px solid #8492A6;*/
    }

    .title {
        margin: 0 auto 40px auto;
        text-align: center;
        color: #505458;
    }

    .formLogin-title {
        text-align: center;
        font-seze: 28px;
    }

    .formLogin-title h3 {
        font-size: 18px;
    }

    .login-no-bottom {
        margin-bottom: 10px;
    }

</style>
